<template>
  <div class="demo">


  </div>
</template>


<!--JavaScript-->
<script >

import {ref, reactive, onMounted, toRefs} from 'vue';
import { useTagsStore } from '../store/tags';
import { usePermissStore } from '../store/permiss';
import { useRouter } from 'vue-router';
import { ElMessage,TabsPaneContext } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { Lock, User } from '@element-plus/icons-vue';

export default {
  name: "demo",

  components: {},

  setup() {
    interface LoginInfo {
      username: string;
      password: string;
    }

    let data = reactive({
      list: []
    })
    const activeName = ref('first')
    const handleClick = (tab: TabsPaneContext, event: Event) => {
      console.log(tab, event)
    }
    const router = useRouter();
    const param = reactive<LoginInfo>({
      username: 'admin',
      password: '123123'
    });

    const rules1: FormRules = {
      username: [
        {
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }
      ],
      password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
    };
    const permiss = usePermissStore();
    const login = ref<FormInstance>();
    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
    }
    const submitForm1 = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid: boolean) => {
        if (valid) {
          ElMessage.success('登录成功');
          localStorage.setItem('ms_username', param.username);
          const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
          permiss.handleSet(keys);
          localStorage.setItem('ms_keys', JSON.stringify(keys));
          router.push('/');
        } else {
          ElMessage.error('登录失败');
          return false;
        }
      });
    };
//注册
    const formSize = ref('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
      email:'',
      code:'',
      password1:'',
      password2:'',
    })
    const validatePass2 = (rule:any,value:any,callback:any)=>{
      if(value===''){
        return callback(new Error('请再次输入密码'))
      }
      else if(value!==ruleForm.password1){
        return callback(new Error('两次输入的密码不一致'))
      }
    }
    const validEmail = (rule:any,value:any,callback:any)=>{
      let emailReg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if(value===""||value===undefined||value==null){
        return callback(new Error('邮箱不能为空'));
      }
      setTimeout(()=>{
        if(emailReg.test(value)){
          callback();
        }else{
          callback(new Error('邮箱格式错误'));
        }
      },300);

    }

    const rules = reactive<FormRules>({
      email: [
        {required:true,validator:validEmail,trigger:'blur'}
      ],
      password1:[
        {required:true,message:'请输入密码',trigger:'blur'},
        { pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}$/,
          message: '密码必须同时包含字母、数字和特殊字符其中三项且8-20位' }
      ],
      password2:[
        {required:true,validator:validatePass2,trigger:'blur'}
      ],
      code:[
        {required:true,message:'请输入验证码',trigger:'blur'}
      ],
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('注册成功')
        } else {
          console.log('注册失败', fields)
        }
      })
    }

    const resetForm1 = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
    }



    const options = Array.from({ length: 10000 }).map((_, idx) => ({
      value: `${idx + 1}`,
      label: `${idx + 1}`,
    }))


    const tags = useTagsStore();
    tags.clearTags();


    const state = reactive({
      labelPosition: 'top',
      formData: {
        email: '',
        code: '',
      },

      // 倒计时
      countDownTime: 60,
      timer: null,
      countDownIng: false,
      getCodeDisabled :false,
    })
    const countDown = () => {

      let startTime:any = localStorage.getItem('startTimeLogin');
      let nowTime = new Date().getTime();
      if (startTime) {
        let surplus = 60 - parseInt(((nowTime - startTime) / 1000).toString(), 10);
        state.countDownTime = surplus <= 0 ? 0 : surplus;
      } else {
        state.countDownTime = 60;
        localStorage.setItem('startTimeLogin', nowTime.toString());
      }

      state.timer = setInterval(() => {
        state.countDownTime--;
        state.getCodeDisabled = true;
        state.countDownIng = true;
        if (state.countDownTime <= 0) {
          localStorage.removeItem('startTimeLogin');
          clearInterval(state.timer);
          state.countDownTime = 60;
          state.countDownIng = false;
        }
      }, 1000)
    }
    onMounted(() => {
      let sendEndTime = localStorage.getItem('startTimeLogin');
      if (sendEndTime) {
        state.countDownIng = true;
        countDown()
      }
    })
    return {
      ...state,
      ...toRefs(data),
      countDown,
    }
  }
}
</script>


<!--css-->
<style scoped lang="scss">
.demo {

}

</style>